{% extends "main/base.html" %}
{% load static %}

{% block title %}建议{% endblock %}

{% block content %}
<form action="{% url 'main:advise' %}" method="post">
  {% csrf_token %}
  <div class="modal fade" id="advise" tabindex="-1" aria-labelledby="adviseTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-scrollable">
      <div class="modal-content">
        <div class="modal-header">
          <p class="modal-title fs-5" id="adviseTitle">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-plus-circle" viewBox="0 0 16 16">
              <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"></path>
              <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"></path>
            </svg>
            提交建议
          </p>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <div class="form-floating mb-3">
            <input type="text" class="form-control" id="title" name="title"
                   placeholder="title" value="{{ title }}" autofocus required maxlength="200">
            <label for="title">标题</label>
          </div>
          <div class="form-floating mb-3">
            <textarea class="form-control" id="content" name="content"
                      placeholder="content" required
                      style="height: 20vh;">{{ content }}</textarea>
            <label for="content">内容</label>
          </div>
        </div>
        <div class="modal-footer">
          <button type="submit" class="btn {% if low %}btn-secondary{% else %}btn-primary{% endif %}">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-plus-circle" viewBox="0 0 16 16">
              <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"></path>
              <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"></path>
            </svg>
            提交
          </button>
        </div>
      </div>
    </div>
  </div>
</form>
<div class="modal fade" id="finishedAdvice" tabindex="-1" aria-labelledby="finishedAdviceTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header">
        <p class="modal-title fs-5" id="finishedAdviceTitle">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-plus-circle" viewBox="0 0 16 16">
            <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"></path>
            <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"></path>
          </svg>
          已完成的建议
        </p>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        {% for advice in finished_advice %}
          <div class="card card-body {% if low %}text-bg-secondary text-dark{% elif advice.finished %}text-bg-success{% else %}text-bg-primary{% endif %} mb-3"
               style="height: 200px;">
            <strong class="card-title d-flex">
              <span class="me-auto">
                {% if advice.sender.identity is not None %}
                <a href="{% url 'main:believer' advice.sender_id %}" class="text-decoration-none" target="_blank">
                {% endif %}
                  <img src="{{ advice.sender.get_image_url }}" alt="{{ advice.sender.username }}" width="24px" height="24px" class="rounded">
                  {{ advice.sender.get_display|safe }}
                {% if advice.sender.identity is not None %}
                </a>
                {% endif %}
                的建议：{{ advice.title }}
              </span>
              <a class="ms-auto text-decoration-none {% if low %}text-dark{% else %}text-white{% endif %}" href="{% url 'main:advise-tick' advice.id %}">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check d-inline-block align-text-top" viewBox="0 0 16 16">
                  <path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z"></path>
                </svg>
                已完成
              </a>
            </strong>
            <hr>
            <div class="overflow-y-auto">
              {{ advice.content|linebreaks }}
            </div>
          </div>
        {% empty %}
          <div class="col">
            <div class="card card-body" style="height: 200px;">
              <strong class="card-title">给所有教徒的建议</strong>
              <hr>
              <p>多给点建议~<br>然后多催开发部成员快更新~</p>
            </div>
          </div>
        {% endfor %}
      </div>
    </div>
  </div>
</div>
<div class="row row-cols-2 g-3 mt-3">
  <div class="col">
    {% if user.identity is None %}
    <span class="d-inline-block d-grid" tabindex="0"
          data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="拥有身份才能提交建议！">
      <button type="button" class="btn btn-outline-secondary" style="height: 200px;" disabled>
    {% else %}
    <span class="d-grid">
      <button type="button" class="btn btn-outline-secondary" style="height: 200px;" id="advise_button"
              data-bs-toggle="modal" data-bs-target="#advise">
    {% endif %}
        <span class="fs-1 align-self-center">
          <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" fill="currentColor" class="bi bi-plus-circle" viewBox="0 0 16 16">
            <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"></path>
            <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"></path>
          </svg>
          提交建议
        </span>
      </button>
    </span>
  </div>
  <div class="col">
    <span class="d-grid">
      <button type="button" class="btn btn-outline-secondary" style="height: 200px;"
              data-bs-toggle="modal" data-bs-target="#finishedAdvice">
        <span class="fs-1 align-self-center">
          <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" fill="currentColor" class="bi bi-check d-inline-block align-text-top" viewBox="0 0 16 16">
            <path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z"></path>
          </svg>
          已完成的建议
        </span>
      </button>
    </span>
  </div>
  {% for advice in unfinished_advice %}
    <div class="col">
      <div class="card card-body {% if low %}text-bg-secondary text-dark{% elif advice.finished %}text-bg-success{% else %}text-bg-primary{% endif %}"
           style="height: 200px;">
        <strong class="card-title d-flex">
          <span class="me-auto">
            {% if advice.sender.identity is not None %}
            <a href="{% url 'main:believer' advice.sender_id %}" class="text-decoration-none" target="_blank">
            {% endif %}
              <img src="{{ advice.sender.get_image_url }}" alt="{{ advice.sender.username }}" width="24px" height="24px" class="rounded">
              {{ advice.sender.get_display|safe }}
            {% if advice.sender.identity is not None %}
            </a>
            {% endif %}
            的建议：{{ advice.title }}
          </span>
          <a class="ms-auto text-decoration-none {% if low %}text-dark{% else %}text-white{% endif %}" href="{% url 'main:advise-tick' advice.id %}">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-caret-right d-inline-block align-text-top" viewBox="0 0 16 16">
              <path d="M6 12.796V3.204L11.481 8 6 12.796zm.659.753 5.48-4.796a1 1 0 0 0 0-1.506L6.66 2.451C6.011 1.885 5 2.345 5 3.204v9.592a1 1 0 0 0 1.659.753z"></path>
            </svg>
            进行中
          </a>
        </strong>
        <hr>
        <div class="overflow-y-auto">
          {{ advice.content|linebreaks }}
        </div>
      </div>
    </div>
  {% empty %}
    <div class="col">
      <div class="card card-body" style="height: 200px;">
        <strong class="card-title">给所有教徒的建议</strong>
        <hr>
        <p>多给点建议~</p>
      </div>
    </div>
  {% endfor %}
</div>
{% endblock %}